<template>
  <!-- 添加或修改财务单据对话框 -->
  <el-dialog :title="pd.title" v-model="pd.open" width="880px" append-to-body
             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="byStagesManage" :model="pd.form" :rules="pd.rules" label-width="80px">

      <el-row>
        <el-col :span="8">
          <el-form-item :label="pageLabel.costMoney" prop="costMoney" label-width="110px">
            <el-input :style="{width: '150px'}" v-model="pd.form.costMoney" disabled="true"/>
          </el-form-item>
          <el-form-item :label="pageLabel.planTime" prop="planTime" label-width="110px">
            <el-date-picker
                :style="{width: '150px'}"
                v-model="pd.form.planTime"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="分期期数" prop="byStages" label-width="110px">
            <el-input :style="{width: '150px'}" v-model="pd.form.byStages" placeholder="请选择分期期数"/>
          </el-form-item>
          <el-form-item label="分期执行周期" prop="byStagesPeriod" label-width="110px">
            <el-input :style="{width: '150px'}" v-model="pd.form.byStagesPeriod" placeholder="请输入整数天数"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="byStagesManage">
// import {byStageBill} from "@/api/fms/bill";
import {getCurrentInstance, reactive} from "vue";
import {useRoute} from "vue-router";
const route = useRoute();
const {proxy} = getCurrentInstance();

const pageLabel = reactive({
  costMoney:'',
  planTime:"",
});

const pd = reactive({
  open: false,
  title: "",
  form: {
  },
  rules: {
    costMoney: [{
      required: true,
      message: "金额不能为空",
      trigger: "change"
    }],
    planTime: [{
      required: true,
      message: "计划收支时间不能为空",
      trigger: "change"
    }],
    byStages: [{
      required: true,
      message: "分期期数不能为空",
      trigger: "change"
    }],
    byStagesPeriod: [{
      required: true,
      message: "分期周期不能为空",
      trigger: "change"
    }]
  },
});


// 单据分期
function byStage(bill) {
  reset();
  //合并
  pd.form = {...pd.form , ...bill};
  pd.open = true;
  pd.title = "分期管理";
}

/** 提交按钮 */
function submitForm() {
  pd.form.params = {};
  pd.form.params['byStagesPeriod']=pd.form.byStagesPeriod;
  proxy.$refs["byStagesManage"].validate(valid => {
    if (valid) {
      // byStageBill(pd.form).then(response => {
      //   proxy.$modal.msgSuccess("分期成功");
      //   pd.open = false;
      //   emit("ok");
      // })
    }
  })
}

// 取消按钮
function cancel() {
  pd.open = false;
  reset();
}

// 表单重置
function reset() {
  pd.form= {
    costMoney:null,
    byStages:null,
    byStagesPeriod:null
  };
  
  proxy.resetForm("byStagesManage");
}

/** 初始化页面 */
function initPage() {
  pd.queryParams = route.query;
  if (pd.queryParams.type == 1 || pd.queryParams.type == 3) {
    pageLabel.costMoney = "应收金额";
    pageLabel.planTime = "预收时间"
  } else if (pd.queryParams.type == 2 || pd.queryParams.type == 4) {
    pageLabel.costMoney = "应付金额";
    pageLabel.planTime = "预付时间";
  }
}


defineExpose({ byStage });
const emit = defineEmits(["ok"]);

initPage()
</script>
